html{
    font-size: 15px;
    a{
        text-decoration: none;
        color: black;
    }
    body{
        display: grid;
        justify-content: center;
        align-content: center;
        width: 100vw;
        height: 100vh;
        nav{
            display: grid;
            grid-template-columns: repeat(6,100px);
            justify-items: center;
            font-size: 1rem;
            overflow: hidden;
            a{
                @for $i from 1 to 7 {
                    &[href]:hover:nth-child(#{$i}) ~ .line{
                        transform: translateX(#{$i * 100 - 100}px);
                    }
                    &:nth-child(#{$i}).active ~ .line{
                        transform: translateX(#{$i * 100 - 100}px);
                    }
                    
                }
            }
            .line{
                height: 5px;
                width: 50px;
                background: linear-gradient(to right,white, #2ecc71,#e67e22,#3498db,white);
                transform: translateX(-100px);
                transition-duration: 0.5s;
                // transition-delay: 0.5s;
            }
        }
        
    }
}
